<template>
     <div class="breadcrumb_wrapper">
                <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                    <el-breadcrumb-item class="breadcrumb_item">店铺信息</el-breadcrumb-item>
                    <el-breadcrumb-item class="breadcrumb_item">店铺账单</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
      
    <div class="full-width-divider"></div> 
    <el-container class="contain">
        <el-aside width="100%" class="aside-container" >
            <div style="margin-top: 0%;">
                <div style="display: flex; margin-top: 5px;">
                      <div>
                          <el-input v-model="name" style="width: 250px;height: 45px" placeholder="商品名"></el-input>
                      </div>
                      <div style="margin-left: 5px;">
                        <el-button class="search" type="primary" @click="getOrders">搜索</el-button>
                      </div>
                      <div style="margin-left: 5px;">
                        <el-button class="search" type="primary" @click="show = tourEmits">查账户流水</el-button>
                      </div>
                </div>
                  <div style="height: 521px;">
                        <!-- 商品信息展示列表 -->
                      <el-table 
                        ref="multipleTableRef"
                        class="el-tb" 
                        header-row-class-name="tb-header" 
                        :data="orders.records" 
                        row-key="id"    
                        max-height="1000px">
                          <el-table-column fixed="left"  prop="orderNo" label="订单号" width="220px" />
                          <el-table-column prop="goodsId" label="商品Id" width="100px" />
                          <el-table-column prop="name" label="商品名称" width="150px" />
                          <el-table-column prop="count" label="商品数量" width="100px" />
                          <el-table-column prop="linkUser" label="联系人" width="150px" />
                          <el-table-column prop="linkAddress" label="联系地址" width="200px" />
                          <el-table-column prop="linkPhone" label="联系方式" width="200px" />
                          <el-table-column label="操作" label-class-name="end-column" width="150px">  
                            <template #default="scope">  
                              <el-button style="border-radius: 15px;" v-if="scope.row.state === 1" type="danger" @click="shipments(scope.row.id)">  
                                <div style="width: 60px;">确认发货</div>  
                              </el-button> 
                               <el-button v-else type="success" @click="shipments(scope.row.id)" style="border-radius: 15px;">  
                                <div style="width: 60px;">已发货</div>
                              </el-button> 
                            </template>  
                          </el-table-column>  
                        </el-table>
                  </div> 
                  <div  class="pagination-wrapper">
                    <el-pagination
                      v-model:current-page="currentPage"
                      v-model:page-size="pageSize"
                      :size="size"
                      :disabled="disabled"
                      :background="background"
                      layout="prev, pager, next, jumper"
                      :total="orders.total"
                      @current-change="getOrders"
                    />
                  </div>
                <div class="aside-right-border"></div> 
            </div>
        </el-aside>


        <el-drawer
          v-model="show"
          :direction="rtl"
          :before-close="handleClose">
                <el-main>
                    <div class="effect_preview">
                        <h2>店铺流水</h2>
                    </div>
                    <div>
                        <el-table class="table1" :data="log" style="width: 100%" height="650">
                          <el-table-column fixed prop="time" label="时间" width="250" />
                          <el-table-column prop="content" label="内容明细" width="150" />
                        </el-table>
                    </div>
                    <div style=" margin-left: 110px" >
                      <h3>账户当前收入：{{ userStore.loginUser.account }}</h3>
                    </div>
                </el-main>
        </el-drawer>    
    </el-container>
</template>

<script setup>
import {  reactive ,ref } from 'vue'
import { ArrowRight} from '@element-plus/icons-vue'
import { pcaTextArr} from "element-china-area-data";
import { PictureFilled } from '@element-plus/icons-vue'
import { get,post } from "@/plugins/axios"
import { Path } from '@/constant/index';
import sort from '@/views/shop-grc/component/sort.vue'
import { ElMessage, tourEmits } from 'element-plus';
import { useUserStore } from '@/stores/pinia';
const userStore = useUserStore()
const show = ref(false)
const rawData = ref([])
// 当前页码  
const currentPage = ref(1);  
// 每页显示的条目数  
const pageSize = ref(7);  
const name = ref('')
// 商品标题 商品ID 商家编码 输入框输入内容
const log = ref([])
getLogs()
function getLogs(){
  get(Path.clogList,null,content => {
    log.value = content
  })
}
function shipments(id){
  post(Path.orderGoodsChangeState,{id: id,state: 2},content => {
    getOrders()
  })
}
const orders = ref([])
getOrders()
function getOrders(){
  get(Path.getOrdersByCid,{
    key: name.value,
    pageNo:currentPage.value,
    pageSize:pageSize.value,
  },content => {
    orders.value = content 
  })
}

</script>
 

<style lang="scss" scoped>

// 输入框样式和触发事件
::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;
   
  }
::v-deep .el-input__wrapper:hover {
  background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}

//面包屑内部样式
.breadcrumb{
    display: flex; // 确保面包屑导航内部也是 Flex 布局  
    align-items: center; // 垂直居中 
}
.breadcrumb_wrapper{
    height: 55px;
    display: flex;
}
.breadcrumb_item{
    font-size: larger;
}


.form{
    margin-left: 0%;
}
label {
    cursor: default;
}
.next-form-item-label {
    display: inline-block;
    margin-left: 0;
}

//横线
.full-width-divider {  
    width: 100%; // 横跨整个容器宽度  
    height: 2px; // 横线的高度  
    background-color: #eeeeee; // 横线的颜色  
    margin-top: -1px; // 如果需要的话，调整这个值以精确控制横线的位置  
    // 注意：如果el-aside和el-main之间有间距，你可能需要调整这个margin-top的值  
    // 或者，如果这条横线应该在el-aside和el-main之间完全占据宽度，  
    // 你可能需要将它放在一个包裹el-aside和el-main的父容器内，并使用Flexbox或Grid来布局  
} 

//竖线
.aside-right-border {  
    position: absolute; // 绝对定位竖线  
    right: 0; // 紧贴 el-aside 的右侧  
    top: 60px; // 从顶部开始  
    bottom: 60px; // 到底部结束  
    width: 1px; // 竖线的宽度  
    height: 82%;
    overflow-y: hidden; 
    background-color: #eeeeee; // 竖线的颜色  
    // 如果需要，可以添加其他样式，如圆角等  
}  
.aside-container{
    position: relative; // 为竖线提供定位上下文  
    display: flex; // 使用 Flexbox 布局  
    height: 700px;
    overflow-y: hidden; 
    overflow-x:hidden ;
}

.save{
    width: 88px;
    height: 36px;
    margin-top: 1%;
    border-radius: 15px;

}

.contain{
    margin-left: 0%;
    height: 90%;
    overflow-y: hidden; 
}
.save_contain{
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}
//效果预览
.effect_preview{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table1{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*
图片上传
*/
.avatar-uploader .el-upload {  
    border: 1px dashed #d9d9d9;  
    border-radius: 6px;  
    cursor: pointer;  
    position: relative;  
    overflow: hidden;  
}  
.avatar-uploader .el-upload:hover {  
    border-color: #409EFF;  
}  
.avatar-uploader-icon {  
    font-size: 28px;  
    color: #8c939d;  
    width: 100%;  
    text-align: center;  
    line-height: 160px;  
}  
.avatar {  
    width: 80px;  
    height: 80px;  
    display: block;  
}  




/* 
  表头
*/
.el-tb {
  ::v-deep .tb-header {
    border-radius: 15px;
    th {
      background-color: #f2f4f7;
      color: #000;
      font-size: medium;
      height: 61px;
    }
    .first-column {
      border-radius: 20px 0 0 20px;
    }
    .end-column {
      border-radius: 0 20px 20px 0;
    }
  }
}


//店铺类型样式
.shop_type{
    margin-left: 4%; 
    background-color: #f2f4f7;
    display: flex;
    align-items: center; 
    text-align: center;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;;
}
.shop_type:hover{
    background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}


// 输入框样式和触发事件
::v-deep .el-input__wrapper {
    background-color: #f2f4f7;
    border-radius: 5px;
    border: 1px solid #dcdfe6; // 添加默认边框
    border-radius: 8px;
   
  }
::v-deep .el-input__wrapper:hover {
  background-color: #ffffff;
  border-color: #409eff; 
  transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}
// 店铺选项样式
.my-dropdown-menu {
  background-color: #f2f4f7;
  padding: 0;
  margin: 0;
  list-style: none;
  border-width: 0;
  border-color:#f2f4f7 ;

  .my-dropdown-item {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f2f4f7;
    &:hover {
      background-color: #fff;
      transition: background-color 0.3s ease, border-color 0.3s ease; 
    }
  }
}

// 请选择 字体的样式
.el-dropdown-link{
    width: 200px;
    font-size: large; 
    margin-left: 5%;
}

// 商品字段展示框的样式
.show_product{
    width: 1400px;
    height: 61px;
    background-color:  #f2f4f7;
    border-radius: 18px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

// 搜索按钮样式
.search{
    width: 88px;
    height: 36px;
    margin-top: 1%;
    margin-bottom: 20px;
    border-radius: 15px;
}
// 删除按钮样式
.delete{
  width: 88px;
  height: 36px;
  margin-top: 1%;
  border-radius: 15px;
  margin-bottom: 20px;
}
.reset_sort{
  width: 88px;
  height: 36px;
  margin-top: 2%;
  border-radius: 15px;
}
// 排序按钮样式
.sort{
  width: 88px;
  height: 36px;
  margin-top: 1%;
  border-radius: 15px;
  margin-bottom: 20px;
}

//分页的样式
.example-pagination-block {
  margin-top: 10px;
  display: flex;
  margin-left: 450px;
  height: 50px;
  margin-bottom: 16px;
}

.pagination-wrapper {  
    display: flex;  
    justify-content: center; /* 水平居中 */  
    align-items: center;     /* 垂直居中（如果需要的话） */  
    /* 可以根据需要添加高度或padding等样式 */  
    height: 50px; /* 示例高度 */  
}
</style>